import React, { useState } from 'react'
import { Space } from 'react-vant'
import { Down } from '@react-vant/icons'
import "./Cancel.css"
import { Checkbox } from 'antd';
import { Button, Toast } from 'antd-mobile'
import axios from "../../utils/index"
import { sleep } from 'antd-mobile/es/utils/sleep'
import { useNavigate } from "react-router-dom"

export default function Cancel() {
    const [val, setVal] = useState("")
    const navigate = useNavigate()
    const datas = JSON.parse(localStorage.getItem('data'))
    const onChange = (e) => {
        console.log(`checked = ${e.target.checked}`);
    };

    const cancelClick = async (inp) => {
        if (inp != "") {
            const forbiddenWords = ['死', '滚蛋', '逼', 'sb', 'fack','妈的','他妈','她妈','它妈','他爸','她爸','它爸']
            for (let i = 0; i < forbiddenWords.length; i++) {
                if (inp.toLowerCase().includes(forbiddenWords[i].toLowerCase())) {
                    Toast.show({
                        content: '内容有敏感词,请重新输入!',
                        position: 'top',
                    })
                    return false
                }
            }
            let list = await axios.put("/udpcancel", { id: datas.capitals.id })
            if (list.code === 200) {
                localStorage.removeItem("data")
                Toast.show({
                    content: "订单已取消",
                    position: 'top',
                })

                setTimeout(() => {
                    navigate('/all/home')
                }, 1000);
            }
        } else {
            let list = await axios.put("/udpcancel", { id: datas.capitals.id })
            if (list.code === 200) {
                localStorage.removeItem("data")
                Toast.show({
                    content: "订单已取消",
                    position: 'top',
                })

                setTimeout(() => {
                    navigate('/all/home')
                }, 1000);
            }
        }

    }

    return (
        <div>
            <div className="topc">
                <div className="returnc">
                    <span className="iconc">
                        <Space gap={20}>
                            <Down className="leftIconc" onClick={() => { navigate("/all/home") }} />
                        </Space>
                    </span>
                    <span className="top-cartc">取消网约车</span>
                </div>
            </div>
            <div className="cancel-text">请选择取消原因:</div>
            <div className="cancel-checked">
                <div className="cancel-checked-left"><Checkbox onChange={onChange}></Checkbox></div>
                <div className="cancel-checked-right">等很长时间</div>
            </div>
            <div className="cancel-checked">
                <div className="cancel-checked-left"><Checkbox onChange={onChange}></Checkbox></div>
                <div className="cancel-checked-right">无法联系司机</div>
            </div>
            <div className="cancel-checked">
                <div className="cancel-checked-left"><Checkbox onChange={onChange}></Checkbox></div>
                <div className="cancel-checked-right">司机被拒绝前往目的地</div>
            </div>
            <div className="cancel-checked">
                <div className="cancel-checked-left"><Checkbox onChange={onChange}></Checkbox></div>
                <div className="cancel-checked-right">司机拒绝前来接载</div>
            </div>
            <div className="cancel-checked">
                <div className="cancel-checked-left"><Checkbox onChange={onChange}></Checkbox></div>
                <div className="cancel-checked-right">显示的地址错误</div>
            </div>
            <div className="cancel-checked">
                <div className="cancel-checked-left"><Checkbox onChange={onChange}></Checkbox></div>
                <div className="cancel-checked-right">价格不合理</div>
            </div>
            <div className="cancel-checked">
                <div className="cancel-checked-left"><Checkbox onChange={onChange}></Checkbox></div>
                <div className="cancel-checked-right">不想打车了</div>
            </div>
            <div className="cancel-checkeds">
                其他的
            </div>
            <div className="cancel-inp">
                <input type="text" value={val} onChange={(e) => { setVal(e.target.value) }} placeholder='其他原因' className="cancel-box-inp" />
            </div>
            <Button className="cancel-button" block color='primary' size='large' loading='auto' loadingText='正在审核请稍后.' onClick={async () => {
                await sleep(2000)
                cancelClick(val)
            }}>
                提交
            </Button>
        </div>
    )
}
